<template>
  <div class="draw-container">
    <!-- <testDraw></testDraw> -->
    <DrawBar></DrawBar>
    <DrawCircle></DrawCircle>
    <DrawPie></DrawPie>
    <DrawTaiJi></DrawTaiJi>
    <KnockBall></KnockBall>
    <CodeRain></CodeRain>
  </div>
</template>

<script>

import testDraw from './components/testDraw.vue'
import DrawBar from './components/drawBar.vue'
import DrawCircle from './components/drawCircle.vue'
import DrawPie from './components/drawPie.vue'
import DrawTaiJi from './components/drawTaiJi.vue'
import KnockBall from './components/knockBall.vue'
import CodeRain from './components/codeRain.vue'

export default {
  components: {
    testDraw,
    DrawBar,
    DrawCircle,
    DrawPie,
    DrawTaiJi,
    KnockBall,
    CodeRain
  },
  data() {
    return { };
  },
  mounted(){ },
  methods: { },
};
</script>

<style lang="scss">
.draw-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  .canvas-container {
    width: 40%;
    margin: 10px auto;
    text-align: center;
    canvas{
      margin: 0 auto;
      border: 1px solid #e6e6e6;
    }
  }
}
</style>
